<!--
 作者 : 唐梓元
 日期 : 2019-05-11
 版本 : 1.0
 描述 :选择工作单位时候的弹出工作单位选择,z组件需要传参outKey可以为任意值，outKey代表是哪个选择框弹出的，同时选完后把outKey，返回给父组件做判断
 使用 : <cmUnitSelect outKey="1"></cmUnitSelect>
 参数 :outKey
 -->

<template>
    <div class="unitWrapper" >
      <div class="unitContainer">
        <div class="searchContent">
          <span>所属单位/学校：</span>
          <span><input type="text" v-model="workUnit" placeholder="请输入查询或者在下方选择"></span>
          <span><button @click="do_search">查询</button></span>
          <img src="../../assets/cha2019-4-30.png" alt="" @click="do_close">
        </div>
        <ul>
          <li>州市
              <ul class="cityUl">
                <li v-for="(item,index) in cityList"
                    :key="index" v-text="item.Name"
                    :class="classes[index]"
                    @click.stop="do_selectCity(item,index)"
                ></li>
              </ul>
          </li>
          <li>区县
          <ul class="XianUl cityUl">
            <li v-for="(item,index) in XianList"
                :key="index" v-text="item.Name"
                :class="classes2[index]"
                @click.stop="do_selectXian(item,index)"
            ></li>
          </ul>
          </li>
          <li style="width: 318px">单位
            <ul class="XianUl cityUl UnitUl">
              <li v-for="(item,index) in UnitList"
                  :key="index" v-text="item.Name"
                  @click.stop="do_selectUnit(item,index)"
              ></li>
            </ul></li>
        </ul>

      </div>
    </div>
</template>

<script>

    export default {
        name: "cmUnitSelect.vue",
      components:{
      },
      props:{
        outKey:{
          type:Number
        }
      },
      data(){
          return{
            displayBar:true,
            cityList:[],
            classes:[],
            classes2:[],
            XianList:[],
            UnitList:[],
            workUnit:'',
            workUnitSn:""
          }
      },

      created(){
        let me=this
        me.$ZcPublic.UserId= localStorage.getItem('UserId')
        me.selec=!this.selec;
        me.$ZcPublic.Server.Post({
          IsNeedLogin:'false',
          Paras:{
            UserId:me.$ZcPublic.UserId,
            Name:'Vue_WorkUnit',
            Action:'City',
            Data:{
            }
          },
          Callback:me.cb_City,
          Scope:me
        });
      },
      methods:{
        do_selectCity(item,index){
          this.workUnit=item.Name
          this.classes=[];
          for(let i=0;i<this.cityList.length;i++){
            if(i==index){
              this.classes.push('active')
            }else {
              this.classes.push('noActive')
            }
          };
          let me=this;
          console.log(item)
          me.$ZcPublic.Server.Post({
            IsNeedLogin:'false',
            Paras:{
              UserId:me.$ZcPublic.UserId ,
              Name:'Vue_WorkUnit',
              Action:'Xian',
              Data:{
                CitySN:item.SN
              }
            },
            Callback:me.cb_Xian,
            Scope:me
          });

        },
        do_selectXian(item,index){
          this.workUnit=this.workUnit.split("-")[0]+"-"+item.Name;
          this.classes2=[];
          for(let i=0;i<this.XianList.length;i++){
            if(i==index){
              this.classes2.push('active')
            }else {
              this.classes2.push('noActive')
            }
          };
          let me=this;
          console.log(item.SN)
          me.$ZcPublic.Server.Post({
            IsNeedLogin:'false',
            Paras:{
              UserId:me.$ZcPublic.UserId ,
              Name:'Vue_WorkUnit',
              Action:'Unit',
              Data:{
                XianSN:item.SN
              }
            },
            Callback:me.cb_Unit,
            Scope:me
          });
        },
        do_selectUnit(item,index){
          this.workUnit=this.workUnit+"-"+item.Name;
          let unitDate={};
          unitDate.workUnit=this.workUnit;
          unitDate.workUnitSn=item.SN;
          unitDate.outKey=this.outKey;
          this.$emit('Unit',unitDate)

        },
        do_search(){
          let me=this
          me.$ZcPublic.Server.Post({
            IsNeedLogin:'false',
            Paras:{
              Name: 'Vue_WorkUnit',
              Action: 'zcCitySelect_web',
              Data:{
                Text: me.workUnit
              }
            },
            Callback:me.cb_zcCitySelect_web,
            Scope:me
          });
        },
        do_close(){
          this.$emit('do_close')
        },
          /*=======*回调==============*/
        cb_City(resJson,scope){
          console.log('城市')
          console.log(resJson)
          this.cityList=resJson.data
        },
        cb_Xian(resJson,scope){
          console.log("区县")
          console.log(resJson);
          this.XianList=resJson.data
        },
        cb_Unit(resJson,scope){
          console.log("单位")
          console.log(resJson);
          this.UnitList=resJson.data
        },
        cb_zcCitySelect_web(resJson,scope){
          console.log('463')
          console.log(resJson)
          if(resJson.success){
            this.XianList=resJson.data.Dist
            this.UnitList=resJson.data.Work
            this.workUnit=resJson.data.Dist[0].ShowName
          }

        }
      }
    }
</script>

<style scoped>
.unitWrapper{
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 999;
  background-color: rgba(0,0,0,.4);
  top:0px
}
.unitWrapper .unitContainer{
width: 640px;
  height: 480px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -250px 0 0 -320px;
  background-color: #eee;
  /*border: 1px solid red;*/
  border-radius: 4px;
  }
.unitWrapper .unitContainer .searchContent{
    width: 100%;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid gainsboro;
  }
.unitWrapper .unitContainer .searchContent span:first-child{
  display: inline-block;
  width: 140px;
  text-align: right;

}
.unitWrapper .unitContainer .searchContent span:nth-child(2){
  display: inline-block;
  width: 400px;

}
.unitWrapper .unitContainer .searchContent span:nth-child(2)>input{
  width: 100%;
  height: 30px;
  border: 1px solid #9DD5F0;
position: relative;
  /*top:-1px;*/
  outline: none;
}
.unitWrapper .unitContainer .searchContent span:nth-child(3)>button{
height: 30px;
  line-height: 26px;
  width: 50px;
  margin-left: 10px;
  background-image: url(../../assets/footImg2019-4-30.png);
  background-size: 100% 100%;
  border-radius: 2px;
  border: none;
  color: white;
}
.unitWrapper .unitContainer .searchContent img{
  width: 24px;
  height: 24px;
  position: absolute;
  top:0;
  right: 0;
  margin-top: -11px;
  margin-right: -11px;
  cursor: pointer;
  /*border-radius: 5;*/
}
.unitContainer ul:nth-child(2){
  text-decoration: none;
  list-style: none;
  height:30px;
  line-height: 30px;
  width: 100%;
  background-color: #dedede;
  padding: 0;
  margin: 0;
}
.unitContainer>ul>li{
  float: left;
  width: 160px;
  border-right: 1px solid #9DD5F0;
  text-align: center;
}
.unitContainer>ul>li:last-child{
  width: 320px;
  border-right: none;
}
  .cityUl{
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 408px;
    /*padding: 3px 3px 0px 3px;*/
    overflow: auto;
  }
.cityUl>li{
  /*width: 100%;*/
  margin: 0 3px 0 3px;
  width: 150px;
  background-color: white;
  /*color: ;*/
  border-bottom: 1px solid gainsboro;
  cursor: pointer;
}
  .active{
    background-color: #d7e6ef!important
  }
  .UnitUl>li{
    width: 97%;
  }
</style>
